<template>
  <div class="bar-chart-01 chart" ref="barChart01"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart01 = ref(null);
const echarts = inject('$echarts');

let xAxisData = ['已确认换证', '待确认旧证', '待确认无证', '在建工程', '临建房屋'];
let seriesData = [
  {
    name: '建筑面积(㎡)',
    data: [4000, 3000, 4000, 5000, 2000]
  },
  {
    name: '资产估值(万元)',
    data: [2000, 800, 800, 5000, 900]
  }
];
const option = {
  compCode: 'C202403003',
  backgroundColor:'rgba(1, 59, 114, 1)',
  grid: {
    top: '15%',
    left: '10%', // 也可设置left和right设置距离来控制图表的大小
    right: '12%'
  },
  tooltip: {
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
      },
    },
  },
  legend: {
    data: [seriesData[0].name, seriesData[1].name],
    top: 0,
    textStyle: {
      color: '#ffffff',
    },
  },
  xAxis: {
    data: xAxisData,
    axisLine: {
      show: false, // 隐藏X轴轴线
      lineStyle: {
        color: '#01FCE3',
      },
    },
    axisTick: {
      show: false, // 隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff', // X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '(㎡)',
      nameTextStyle: {
        color: '#ebf8ac',
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#162125',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
    },
    {
      type: 'value',
      name: '万元',
      nameTextStyle: {
        color: '#ebf8ac',
      },
      position: 'right',
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#162125',
        },
      },
      axisLabel: {
        show: true,
        formatter: '{value}', // 右侧Y轴文字显示
        textStyle: {
          color: '#fff',
        },
      },
    },
    {
      type: 'value',
      // gridIndex: 0,
      // splitNumber: 8,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
        },
      },
    },
  ],
  series: [
    {
      name: seriesData[0].name,
      type: 'bar',
      barWidth: 15,
      yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#1F91F3',
            },
            {
              offset: 1,
              color: '#50E0FF',
            },
          ]),
        },
      },
      data: seriesData[0].data,
    },
    {
      name: seriesData[1].name,
      type: 'line',
      smooth: true, // 平滑曲线显示
      lineStyle: {
        color: '#FFE99F',
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#FFE99F'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ]),
      },
      data: seriesData[1].data,
    }
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart01.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
